<template>
  <a-space
    class="container"
    direction="vertical"
  >
    <a-card>
      <a-form
        :model="searchValue"
        label-align="left"
        auto-label-width
      >
        <a-row class="grid-demo">

          <a-col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :xl="6"
            :xxl="6"
          >
            <a-form-item
              field="dictName"
              label="字典名称"
            >
              <a-input
                allow-clear
                v-model="searchValue.dictName"
                placeholder="请输入字典名称"
              />
            </a-form-item>
          </a-col>

          <a-col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :xl="6"
            :xxl="6"
            style="margin-left: 20px;"
          >
            <a-form-item
              field="dictCode"
              label="字典编码"
            >
              <a-input
                allow-clear
                v-model="searchValue.dictCode"
                placeholder="请输入字典编码"
              />
            </a-form-item>
          </a-col>

          <a-col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :xl="6"
            :xxl="6"
          >
            <a-form-item>
              <a-space>
                <a-button
                  type="primary"
                  @click="search"
                >
                  <template #icon>
                    <icon-search />
                  </template>
                  <span>查询</span>
                </a-button>
                <a-button @click="reset">
                  <template #icon>
                    <icon-refresh />
                  </template>
                  <span>重置</span>
                </a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card>
      <div class="tabletools">
        <a-space>
          <a-button
            type="primary"
            @click="handleAdd"
            v-has="'add'"
          >
            <template #icon>
              <icon-plus />
            </template>
            <span>新增</span>
          </a-button>

          <a-button
            status="danger"
            type="primary"
            @click="handleDelAll"
            :disabled="selectedKeys.length === 0"
            v-has="'deleteInBulk'"
          >
            <template #icon>
              <icon-delete />
            </template>
            <span>批量删除</span>
          </a-button>


          <a-button
            type="primary"
            status="success"
            @click="exportToExcel"
            v-has="'export'"
          >
            <template #icon>
              <icon-share-external />
            </template>
            <span>导出</span>
          </a-button>

          <a-button
            type="primary"
            status="warning"
            @click="dowmLoad"
            v-has="'download'"
          >
            <template #icon>
              <icon-download />
            </template>
            下载导入模版
          </a-button>

          <ExcelUpload
            actions="sys/dict/importXls"
            @success="getList"
            v-has="'import'"
          >导入</ExcelUpload>
        </a-space>
      </div>
      <a-table
        style="user-select: none;"
        :columns='columns'
        :data='data'
        :bordered="tableBorder"
        v-model:selectedKeys="selectedKeys"
        :row-selection="rowSelection"
        row-key="id"
        :pagination="pagination"
        @page-change="handlePageChange"
      >

        <template #index="{record, column, rowIndex}">
          {{ (pagination.current - 1) * pagination.pageSize + rowIndex + 1 }}
        </template>

        <template #operate="{record}">
          <a-space>
            <a-button
              @click="handleEdit(record)"
              v-has="'edit'"
              type="primary"
            >编辑</a-button>
            <a-button
              @click="handleDelete(record)"
              type="primary"
              v-has="'delete'"
              status="danger"
            >删除</a-button>
            <a-button
              @click="gotoChild(record.id,record.dictName)"
              type="primary"
              status="warning"
              v-has="'configuration'"
            >字典配置</a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>
    <add-dictionary
      ref="dictionary"
      @getList="getList"
    />
  </a-space>
</template>
  
<script setup lang="ts">
import { onMounted, ref, reactive, getCurrentInstance } from "vue";
import { downloadFile } from "@/utils";
import { useRouter, useRoute } from "vue-router";
import AddDictionary from "./AddDictionary.vue";
import { dictionaryList, DelDictionary, downLoad } from "@/services/dictionary";
import { tableBorder } from "@/utils/border/table-border.ts";
import { uploadData } from "@/services/commonApi";
import { Message, PaginationProps } from "@arco-design/web-vue";
import useModal from "@/hooks/useModal.ts";
const { ModalShow, ModalHide, ModalLoading } = useModal();
const handleSelect = () => {};
// 导入模块
const dowmLoad = () => {
  downLoad({ templateName: "dictTemplate" }).then((res) => {
    downloadFile(res as Blob, `数据字典导入模板.xlsx`);
  });
};
const pagination = reactive<PaginationProps>({
  total: 0,
  current: 1,
  pageSize: 10,
  showTotal: true,
});
const router = useRouter();
const passCurrent = ref(1);
const gotoChild = (id, dictName) => {
  passCurrent.value = current.value;


  router.push({
    name: "childDic",
    query: {
      id: id,
      dictName: dictName,
      page: current.value,
      SdictCode: searchValue.dictCode,
      SdictName: searchValue.dictName,
    },
  });
};

const searchValue = reactive({
  dictName: "",
  dictCode: "",
});
const search = () => {
  current.value = 1;
  selectedKeys.value = [];
  getList();
};
const reset = () => {
  searchValue.dictName = "";
  searchValue.dictCode = "";
  search();
};

const total = ref("");

// 导出
const exportToExcel = () => {
  uploadData(searchValue).then((res: any) => {
    downloadFile(res, `数据字典.xlsx`);
  });
};

const selectedKeys = ref([]);
const rowSelection = reactive({
  type: "checkbox",
  showCheckedAll: true,
  onlyCurrent: false,
});
// 批量删除
const handleDelAll = () => {
  ModalShow({
    title: "提示",
    content: "您确认要删除选中的字典信息吗？",
  })
    .then(() => {
      DelDictionary(selectedKeys.value).then((res) => {
        if (res.code === 200) {
          if (data.value.length === 1) {
            current.value = current.value - 1;
          }
          Message.success(res.data);
          getList();
          ModalHide();
          selectedKeys.value = [];
        } else {
          ModalHide();
        }
      });
    })
    .catch(() => {
      Message.info("您取消了删除");
    });
};

const columns = [
  {
    title: "序号",
    dataIndex: "index",
    align: "center",
    slotName: "index",
  },
  {
    title: "字典名称",
    dataIndex: "dictName",
    align: "center",
  },
  {
    title: "字典编码",
    dataIndex: "dictCode",
    align: "center",
  },
  {
    title: "描述",
    dataIndex: "description",
    align: "center",
  },
  {
    title: "操作",
    align: "center",
    slotName: "operate",
  },
];
// 删除
const id = ref("");
const handleDelete = (row) => {
  id.value = row.id;
  ModalShow({
    title: "提示",
    content: "您确认要删除这条字典信息吗？",
  })
    .then(() => {
      DelDictionary([id.value]).then((res) => {
        if (res.code === 200) {
          if (data.value.length === 1) {
            current.value = current.value - 1;
          }
          Message.success(res.data);
          getList();
          ModalHide();
        } else {
          ModalHide();
        }
      });
    })
    .catch(() => {
      Message.info("您取消了删除");
    });
};

// 修改
const handleEdit = (row) => {
  dictionary.value?.edit(row);
};
const data = ref([]);

const dictionary = ref<{
  show: () => void;
  edit: (row: any) => void;
}>();

const handleAdd = () => {
  dictionary.value?.show();
};
// 分页
const handlePageChange = (page: number) => {
  current.value = page;
  getList();
};

const current = ref(1);
const pageSize = ref(10); // 每页显示数量
const getList = () => {
  dictionaryList({
    current: current.value,
    size: pageSize.value,
    data: {
      dictCode: searchValue.dictCode,
      dictName: searchValue.dictName,
    },
  }).then((res) => {
    if (res.code === 200) {
      data.value = res.data.records;
      total.value = res.data.total;
      pagination.total = res.data.total;
      pagination.current = res.data.current;
      pagination.pageSize = res.data.size;
    }
  });
};

const route = useRoute();
onMounted(() => {

  if (route.query.page !== undefined) {
    current.value = route.query.page;
  }
  if (passCurrent.value !== 1) {
    current.value = passCurrent.value;
  }
  if (route.query.SdictCode) {
    searchValue.dictCode = route.query.SdictCode;
  }
  if (route.query.SdictName) {
    searchValue.dictName = route.query.SdictName;
  }

  getList();
});
</script>
  
<style scoped lang="scss">
.pagination {
  position: absolute;
  bottom: 35px;
  right: 10px;
}
</style>
  